import React, { Component } from 'react'
import "./ProductShow.scss"
import axios from 'axios'
import { withRouter } from "react-router-dom"


class ProductShow extends Component {
    state = {
        productList: []
    }

    // 异步请求
    componentDidMount() {
        // 请求商品数据
        axios.get("./json/ProductShow.json").then(res => {
            
            let productList_str = res.data
            let productList = productList_str.data.wall.docs
            // console.log(res.data.data.wall );
            
            this.setState({ productList })
            // console.log(res);
        })
    }

    // 跳转商品详情页面
    goToNewDetail=(id)=>{
        this.props.history.push('/details/'+ "1msvj44")
    }

    render() {
        return (
            <div className="productShow" >
                 {this.state.productList && this.state.productList.map((v, i) => {
                    return (
                        <div className='productShow-item' key={v.iid} onClick={this.goToNewDetail.bind(this,i)}>
                            <div className='productShow-item-img'>
                                <img src={v.img} alt="" />
                            </div>
                            <div className='productShow-item-text'>
                                <div className='item-text-title'>{v.title}</div>
                                <div className='item-content'>
                                    <div className="item-left">
                                        <span>￥{v.price}</span>
                                    </div>
                                    <div className="item-right">
                                        <span data-v-3daeef02>{v.cfav}</span>
                                        {/* <i className="iconfont icon-xingxing"></i> */}
                                    </div>
                                </div>
                                <div className="productShow-item-buy">
                                    <span onClick={this.goToNewDetail.bind(this,i)}>立即购买</span>
                                </div>
                            </div>
                        </div>
                    )
                })}
            </div>
        )
    }
}
export default withRouter(ProductShow)
